<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="header">
      <div class="inputItem">
        <div class="title">运单状态</div>
        <div class="inputBox">
          <el-select class="select" v-model="WaybillStatus" placeholder="请选择">
            <el-option v-for="item in WaybillStatusArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="inputItem">
        <div class="title">运单编号</div>
        <div class="inputBox">
          <el-input v-model="waybillNo" placeholder="请输入内容" @keyup.enter.native="getList(1)"></el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">订单编号</div>
        <div class="inputBox">
          <el-input v-model="orderNo" placeholder="请输入内容" @keyup.enter.native="getList(1)"></el-input>
        </div>
      </div>
      
      <div class="inputItem">
        <div class="title">承运车队</div>
        <div class="inputBox">
          <el-input v-model="fleetName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>

      <div class="inputItem">
        <div class="title">司机姓名</div>
        <div class="inputBox">
          <el-input v-model="driverName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>

      <div class="inputItem">
        <div class="title">货源方(多个查询 , 隔开)</div>
        <div class="inputBox">
          <el-input style="width: 300px;" v-model="ownerName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>
      <div class="inputItem">
        <div class="title">项目名称(多个查询 , 隔开)</div>
        <div class="inputBox">
          <el-input style="width: 300px;" v-model="projectName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>
      
      <div class="inputItem" style="margin-left:30px">
        <div class="title">创建时间</div>
        <el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>
      <!-- 查询 -->
      <div class="Btn_grounp">
        <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
          @click="getList(1)">查询</el-button>
        <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
          @click="clearUp()">清空</el-button>
      </div>
      
    </div>
    <div class="main">
      <div class="anniu">
        <el-button class="addCargoOwner" @click="exportDown" :loading="exportLoading">
          导出运单数据统计
        </el-button>
      </div>
      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left"
          ref="registTable">
          <el-table-column align="left" prop="SerialNumber" width="80" label="序号">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="auditResult" label="运单状态" width="120">
            <template slot-scope="scope">
              <!-- NEW( code: 1， info:"新订单") -->
              <div class="tag Canceled" v-if="scope.row.auditResult
                ? scope.row.auditResult.value == 1
                : false
              ">
                <div class="dian"></div>
                <div class="text">订单驳回</div>
              </div>
              <!-- HANG_UP( code: 2， info:"挂起")，PAYING( code: 3， info:"等待付款")PAID( code: 4，info:"已付款") -->
              <div class="tag Canceled" v-if="scope.row.auditResult
                ? scope.row.auditResult.value == 2
                : false
              ">
                <div class="dian"></div>
                <div class="text">运单驳回</div>
              </div>
              <div class="tag complete" v-if="scope.row.auditResult
                ? scope.row.auditResult.value == 3
                : false
              ">
                <!--  SHIPMENTING( code: 5,SHIPMENTED( code: 6info:"已发货")-->
                <div class="dian"></div>
                <div class="text">合规</div>
              </div>
              <div class="tag waitDispatch" v-if="scope.row.auditResult
                ? scope.row.auditResult.value == 0
                : false
              ">
                <div class="dian"></div>
                <!-- WAITING_PAY( code: 7，info:"等待到付") -->
                <div class="text">未审核</div>
              </div>
              <div class="tag dispatched" v-if="scope.row.auditResult == null">
                <div class="dian"></div>
                <div class="text">在途</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="waybillNo" width="200" label="运单编号"></el-table-column>
          <el-table-column align="left" prop="ownerName" label="货源方"></el-table-column>
          <el-table-column align="left" prop="projectName" label="项目名称"></el-table-column>
          <!--          <el-table-column align="left" prop="orderTypeValue" label="业务类型">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>自营</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="left" prop="fleetName" label="承运车队">
          </el-table-column>
          <el-table-column align="left" prop="driverName" label="司机姓名">
          </el-table-column>
          <!--          <el-table-column align="left" prop="lineName" label="线路">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>-->
          <!--                {{ scope.row.lineName==null || scope.row.lineName==''?'&#45;&#45;.&#45;&#45;':scope.row.lineName}}-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="left" prop="totalAmount" label="司机金额">
          </el-table-column>
          <el-table-column align="left" prop="otherAmount" label="其他费用">
            <template slot-scope="scope">
              <div>{{ scope.row.otherAmount ? otherAmount : "无" }}</div>
            </template>
          </el-table-column>

          <el-table-column align="left" prop="createTime" width="160" label="接单时间" sortable>
          </el-table-column>
          <el-table-column align="left" label="操作" width="105">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="
                  $router.push({
                    path: 'details/' + scope.row.waybillId,
                  })
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="scope.row.auditResult
                  ? scope.row.auditResult.value == 1
                  : false
                " @click="
                  $router.push({
                    path: '/home/selfOperatedOrder/editCarrierOrder',
                    query: { id: scope.row.orderId, type: '2' },
                  })
                  ">编辑</el-button>
                <!--      <el-button type="text" size="small">更多</el-button> -->
                <el-button type="text" size="small" @click="audit(scope.row.waybillId, scope.row.isRange)" v-if="scope.row.auditResult
                  ? scope.row.auditResult.value == 0
                  : false
                ">审核</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background
          layout="slot,prev, pager, next" :total="data.total * 1" :page-size="pageSize * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
    <!-- 审核弹窗 -->
    <el-dialog class="dialog" title="运单审核" :visible.sync="visibleDialogBox" width="600px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="3">合规</el-radio>
            <el-radio :label="5">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="异常信息" prop="status" v-if="ruleForm.isRange">
          <a>存在范围外打卡</a>
        </el-form-item>
        <div v-if="ruleForm.status == 3">
          <el-form-item label="备注" prop="cerInfo">
            <el-input type="textarea" resize="none" :rows="3" placeholder="请输入内容" v-model="ruleForm.cerInfo"></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="驳回类型" prop="waybill">
            <el-radio-group v-model="waybill">
              <el-radio :label="1">订单信息异常</el-radio>
              <el-radio :label="2">运单信息异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运单信息地址:" v-if="waybill == 2">
            <div v-for="(item, i) in addrMood" :key="i">
              <div>{{ item.address }}</div>
              <div style="display: flex;align-items: center;">
                <div v-for="(meth, k) in item.img" :key="k" class="addr_methimg">
                  <el-image @click.stop.prevent="images(meth, item)" :src="meth.imgUrl" class="addr_methimgitem">
                  </el-image>
                  <div class="addr_methimgqu" v-if="meth.isShow" @click.stop.prevent="meth.isShow = false">
                    <div class="addr_methimgquflx">
                      <img src="../../assets/img/error.png" width="50">
                    </div>
                  </div>
                  <div class="absolute">
                    <!-- 备注 -->
                    <el-input resize="none" type="textarea" v-if="meth.isShow" placeholder="请输入备注" v-model="meth.remark"
                      maxlength="40" show-word-limit>
                    </el-input>
                  </div>
                </div>

              </div>
            </div>
          </el-form-item>
        </div>

      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button class="cancelBtn" @click="visibleDialogBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" v-preventReClick  @click="SubmitAudit()" v-if="ruleForm.status == 3">确 定</el-button>
        <el-button class="submitBtn" type="primary" v-preventReClick @click="submit()" v-else>确 定</el-button>

      </div>

    </el-dialog>
  </div>
</template>

<script>
import {
  workbook2blob,
  openDownloadDialog,
} from "@/common/blobAndOpenDownload.js";
import XLSX from "xlsx";

import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      WaybillStatus: '',
      WaybillStatusArr: [
        { value: '', label: "全部" },
        { value: "0", label: "待审核" },
        { value: "1", label: "订单驳回" },
        { value: "2", label: "运单驳回" },
        { value: '3', label: "合规" },
        { value: '4', label: "在途" }
      ],
      driverName: "",
      fleetName: "",
      projectName: "",
      isRange: false,
      ownerName: "",
      addrMood: [],
      waybillId: "",
      waybill: 1,
      value1: "",
      value2: "",
      isUnfold: false,
      supplierName: "", //接单人
      orderNo: "", //订单编号
      waybillNo: "",//运单编号
      orderStatus: "", //订单状态
      planName: "", //计划名称
      projectName: "", //项目名称
      orderStateArr: [
        {
          value: "",
          label: "全部状态",
        },
        {
          value: "0",
          label: "未审核",
        },
        {
          value: "1",
          label: "作废",
        },
        {
          value: "2",
          label: "有异常",
        },
        {
          value: "3",
          label: "合规",
        },
      ],
      searchValue: "",

      searchArr: [
        { label: "订单编号", value: "orderNo" },
        { label: "运单编号", value: "waybillNo" },
        // { label: "货主名称", value: "ownerName" },
        // { label: "计划名称", value: "planName" },
        // { label: "项目名称", value: "projectName" },
        { label: "订单状态", value: "orderStatus" },
        // { label: "承运方", value: "supplierName" },
        // { label: "开始时间", value: "startTime" },
        // { label: "结束时间", value: "endTime" },
      ],
      operateValue: "",
      searchFrom: {},
      selectValue: "waybillNo",
      ruleForm: {
        status: 3,
        cerInfo: "",
        isRange: false,
      },
      rules: {
        status: [{ required: true, message: "请选择", trigger: "change" }],
        cerInfo: [{ max: 200, message: "最大长度200 个字符", trigger: "blur" }],
      },
      visibleDialogBox: false,
      data: {},
      records: [],
      options: [
        {
          value: "批量取消",
          label: "批量取消",
        },
      ],
      multipleSelection: [], //存放批量选择的订单
      selectionLegth: 0, //已选择几项
      operateValue: "",
      enterpriseName: "", //企业名称 值
      pageCurrent: "1", //当前页
      pageSize: "15", //每页10条
      exportLoading: false,
      createTime: ''
    };
  },

  methods: {
    //导出文档
    async exportDown() {
     let params = {
        orderNo: this.orderNo, //订单编号
        waybillNo: this.waybillNo, //订单编号
        auditStatus: this.WaybillStatus, //订单状态
        fleetName: this.fleetName,
        projectName: this.projectName,
        ownerName: this.ownerName,
        driverName: this.driverName,
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
      };
      ////console.log(params);
      let res = await httpApi.selfOperatedWaybillApi.export_waybillInfo_list(params)
      console.log(res)
      let list = res.data.data
      this.exportLoading = true;
      list.forEach((item,i)=>{
        item.specification = JSON.parse(item.specification)
      })
      const sheetData1 = list.map((item, index) => ({
        序号: index + 1,
        运单编号: item.waybillNo,
        运单状态: item.auditResult ? item.auditResult.info : '在途',
        货源方: item.ownerName,
        货主金额: item.orderTotalAmount,
        项目名称: item.projectName,
        承运车队: item.fleetName,
        司机姓名: item.driverName,
        车牌号: item.numberplate,
        车辆品牌: item.brandModel,
        车辆类型: item.specification.energyType + item.vehicleType + item.specification.structureType + item.specification.modelType,
        司机运费: item.totalAmount,
        司机其他费用: item.otherAmount || 0,
        接单时间: item.createTime,
        结算状态: item.settlementStatus == 1 ? '结算' : '未结算'
      }));
      // sheetData1.push({});
      // sheetData1.push({
      // 	结算金额:"总金额："+this.formdata.orderAmountAll,
      // 	实际金额:"实际总金额："+this.formdata.payAmountAll
      // });
      const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
      for (let key in sheet1) {
        // //console.log(key);
        if (key != "!ref" && key != "!merges" && key != "!cols") {
          sheet1[key].s = {
            alignment: {
              horizontal: "center",
              vertAlign: "center",
            },
          };
        }
      }
      let cols = []; // 设置每列的宽度
      // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
      // //console.log(sheetData1);
      // 序号: index + 1,
      // 	运单编号: item.waybillNo,
      //   运单状态:item.auditResult.info || '待审核',
      // 	货源方: item.ownerName,
      // 	货主金额: item.settlementAmount,
      // 	项目名称: item.projectName,
      // 	承运车队: item.fleetName,
      // 	司机姓名: item.driverName,
      //   车牌号:item.numberplate,
      //   车辆品牌:item.brandModel,
      //   车辆类型: item.specification.energyType +item.vehicleType+ item.specification.structureType+ item.specification.modelType,
      // 	司机运费: item.totalAmount,
      // 	司机其他费用: item.otherAmount || 0,
      //   接单时间:item.createTime
      let headCol = [
        "序号",
        "运单编号",
        "运单状态",
        "货源方",
        "货主金额",
        "项目名称",
        "司机姓名",
        "车牌号",
        "车辆品牌",
        "车辆类型",
        "司机运费",
        "司机其他费用",
        "接单时间",
      ];
      for (let i = 0; i <= headCol.length; i++) {
        let col = {};
        col.wch = this.getCellWidth(headCol[i], sheetData1);
        cols.push(col);
      }
      sheet1["!cols"] = cols; // 设置列宽信息到工作表
      const wb = XLSX.utils.book_new(); // 初始化一个excel文件
      XLSX.utils.book_append_sheet(wb, sheet1, "运单费用统计");
      const workbookBlob = workbook2blob(wb);
      openDownloadDialog(workbookBlob, `运单费用统计.xlsx`);
      this.exportLoading = false;
    },
    getCellWidth(value, sheetData) {
				//计算每列的需设置的宽度
				return 40;
			},
    images(e, i) {
      e.isShow = !e.isShow
    },
    async submit() {
      let data = {
        aberrantUrlDto: [],
        waybillId: this.waybillId,
        waybillAuditResult: this.waybill
      }
      if (data.waybillAuditResult == 2) {
        this.addrMood.forEach((item, i) => {
          item.img.forEach((meth, k) => {
            if (meth.isShow) {
              data.aberrantUrlDto.push({ url: meth.imgUrl, addrid: item.addrid })
            }
          })
        })


        let some = [];
        data.aberrantUrlDto.forEach(el => {
          if (!some.some(e => e.addrid == el.addrid)) {
            some.push({ addrid: el.addrid, url: [] });
          }
        });
        some.forEach(item => {
          data.aberrantUrlDto.forEach(el => {
            if (item.addrid == el.addrid) {
              item.url.push(el.url)
            }
          })
        })
        some.forEach(item => {
          item.url = item.url.join()
        })
        // 勾选表示不通过 需写入照片异常备注
        some.forEach((item, i) => {
          item.remark = this.addrMood[i].img[0].remark
        })

        data.aberrantUrlDto = some



        if (data.aberrantUrlDto.length == 0) {
          this.$message.error('运单信息驳回不完整！')
          return false
        }

      } else {
        data = {
          waybillId: this.waybillId,
          waybillAuditResult: this.waybill
        }
      }

      let res = await this.$http.selfOperatedWaybillApi.abnormal(data)
      if (res.data.code == 200) {
        this.$message.success("审核成功");
        this.visibleDialogBox = false;
        this.getList();
      } else {
        this.$message.error("审核失败");
      }
    },
    async informationNode(e) {
      let res = await this.$http.selfOperatedWaybillApi.informationNode({ waybillId: e })
      this.addrMood = res.data.data
      this.addrMood.forEach((item, i) => {
        item.img = []
        item.url = item.url.split(',')
        item.url.forEach(meth => {
          item.img.push({
            imgUrl: meth,
            isShow: false,
            remark: '',

          })
        })
      })
      this.addrMood = JSON.parse(JSON.stringify(this.addrMood))

    },


    clearUp() {
      this.supplierName = "", //承运方
        this.orderNo = "", //订单编号
        this.waybillNo = "", //订单编号
        this.startTime = "", //开始时间
        this.endTime = "", //结束时间
        this.customerName = "", //接单人

        this.WaybillStatus = "";
      this.driverName = "",
        this.fleetName = "",
        this.projectName = "",
        this.ownerName = "",
        this.getList(1);
    },
    changeUnfold() {
      this.isUnfold = !this.isUnfold;
    },
    changeSelect(val) {
      this.selectValue = val;
    },
    changeSearchValue(val) {
      this.searchValue = val;
    },

    getSerialNumber(arr) {
      // 前端解决序号
      arr.forEach((item, i) => {
        let num = i + 1;
        item.SerialNumber = num;
      });
    },

    getList(current) {
      let params = {};
      params = {
        current: current || this.pageCurrent,
        size: this.pageSize,
        orderNo: this.orderNo, //订单编号
        waybillNo: this.waybillNo, //订单编号
        auditStatus: this.WaybillStatus, //订单状态
        fleetName: this.fleetName,
        projectName: this.projectName,
        ownerName: this.ownerName,
        driverName: this.driverName,
        startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
        endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
      };
      ////console.log(params);
      httpApi.selfOperatedWaybillApi.getWaybillList(params).then((res) => {
        ////console.log("列表", res);
        this.records = res.data.data.records;

        this.data = res.data.data;
        this.getSerialNumber(this.records);

        ////console.log(res.data.data.records);
      });
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let supplierIdArr = [];
      //数组转字符串
      this.multipleSelection.forEach((item) => {
        supplierIdArr.push(item.orderId);
      });
      this.multipleSelection = supplierIdArr.join(",");
      this.selectionLegth = supplierIdArr.length;
      ////console.log("批量选择", this.multipleSelection);
    },

    BatchOperation(val) {
      ////console.log(val);
      if (val == "批量取消") {
        this.$confirm("此操作将批量取消运单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求
            if (this.multipleSelection != "") {
              let params = {
                orderId: this.multipleSelection,
              };
              ////console.log("批量取消传参", params);
              httpApi.orderManagementApi
                .deleteCarrierOrder(params)
                .then((res) => {
                  ////console.log("批量取消", res);
                  if (res.data.code == 200) {
                    this.getList(); //删除后 更新列表数据
                    this.$message({
                      type: "success",
                      message: "批量取消运单成功!",
                    });
                  }
                });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择取消项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    audit(id, isRange) {
      this.waybillId = id;
      this.visibleDialogBox = true;
      this.ruleForm = {
        status: 3,
        cerInfo: "",
        isRange: isRange
      };
      this.informationNode(id)
    },
    // 审核弹框提交
    SubmitAudit() {

      let parmas = {
        resultInfo: this.ruleForm.cerInfo,
        waybillAuditResult: this.ruleForm.status,
        waybillId: this.waybillId,
      };
      ////console.log(parmas);
      httpApi.selfOperatedWaybillApi.WaybillAudit(parmas).then((res) => {
        ////console.log("结构", res);
        if (res.data.code == 200) {
          this.$message.success("审核成功");
          this.visibleDialogBox = false;
          this.getList();
        } else {
          this.$message.error("审核失败");
        }
      });
    },
    changePages(val) {
      //页码变化时
      this.pageCurrent = val.toString();
      //console.log(this.pageCurrent);
      this.getList();
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.registTable.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.registTable.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.registTable.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


  mounted() {
    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.addr_methimgquflx {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20%;


}



.addr_methimgqu {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  background: rgba(0, 0, 0, .4);
}

.addr_methimgitem {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.addr_methimg {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;

  .absolute {
    position: absolute;
    right: -230%;
    top: 50%;
    transform: translateY(-50%);


  }
}

.header {
  // height: 76px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .Btn_grounp {
    display: flex;
    // margin-left: auto;

    .searchBtn {
      width: 80px;
      height: 32px;
      color: #fff;
      font-size: 12px;
      background-color: #1890ff;
    }

    .clearBtn {
      width: 80px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      margin-left: 16px;
      margin-right: 16px;
    }
  }

  .inputItem {
    display: flex;
    align-items: center;
    margin: 15px 10% 15px 0;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      .select {
        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }

  .zankai_area {
    width: 100%;

    .inputBox {
      display: flex;
      margin-bottom: 16px;

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
      }

      .label {
        font-size: 12px;
        width: 72px;
        line-height: 32px;
        height: 32px;
        text-align: right;
        color: #262626;
        margin-right: 8px;
      }

      .input {
        height: 32px;
        width: 225px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        font-size: 12px;

        &:focus {
          border: 1px solid #1890ff;
        }
      }

      .orderSelector {
        width: 225px;

        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      .datePicker {
        ::v-deep .el-input__icon {
          display: none;
        }
      }
    }
  }
}

.main {
  background-color: #fff;
  // 64 + 76 +14+17 +16+8 =171
  height: calc(100vh - 259px);
  width: 100%;
  background-color: #fff;
  padding: 18px 0px 0 0px;

  .main_head {
    padding: 0 30px 0 29px;
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;

    .main_head_left {
      font-size: 12px;
      color: #262626;
    }






    .selector {
      width: 105px;
      height: 32px;
      color: #262626;
      font-size: 12px;
    }

  }
}

.list {
  height: calc(100% - 50px);
  padding: 0 30px;

  ::v-deep .el-table__body-wrapper {
    max-height: calc(100vh - 374px) !important;
    overflow-y: scroll;
  }

  // 表头样式
  ::v-deep .el-table__header th {
    background-color: #f0f6fd;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    padding: 0;
    height: 48px;

    // 表 body的td
    ::v-deep .el-table__body td {
      color: #595959;
      font-size: 12px;
    }
  }
}

.tag {
  width: 73px;
  height: 28px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  .dian {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 4px;
  }

  // 待派车标签 样式
  &.waitDispatch {
    background-color: #fffce8;
    color: #f9aa0d;

    .dian {
      background-color: #f9aa0d;
    }
  }

  &.gery {
    background-color: #f7f8f8;
    color: #a8b0b6;

    .dian {
      background-color: #a8b0b6;
    }
  }

  //已派车 和运输中 样式
  &.dispatched {
    background-color: #ecf5fe;
    color: #1890ff;

    .dian {
      background-color: #1890ff;
    }
  }

  //已完成
  &.complete {
    background-color: #ebfef5;
    color: #1acb7a;

    .dian {
      background-color: #1acb7a;
    }
  }

  //已取消
  &.Canceled {
    background-color: #fde8e9;
    color: #f5222d;

    .dian {
      background-color: #f5222d;
    }
  }
}

.paginationBox {
  border-top: 1px solid #f0f0f0;
  width: 100%;
  background-color: #fff;
  display: flex;
  height: 48px;
  align-items: center;

  .pagination {
    margin-left: auto;
    margin-right: 30px;
  }
}


.addCargoOwner {
  background-color: #1890ff;
  border-radius: 4px;
  height: 32px;
  color: #ffffff;
  font-size: 12px;
  padding: 8px 17px 9px 17px;
  transition: 0.2s;
  cursor: pointer;
  margin-right: 17px;
}
.anniu{
  width: 100%;
  display: flex;
  justify-content: end;
  margin: 10px;
}
</style>
